.registerPage {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 85.6vh; /* 使容器全高 */
    width:100%; /* 使容器全宽 */
    margin: 0; /* 去除默认边距 */
    background-size: cover;
}

.registerContainer {
    max-width: 350px;
    width: 100%;
    padding: 20px;
    height: 450px;
    margin: -60px 0 0 200px;
    border: 1px solid #ccc;
    border-radius: 20px;
    background-color: #ffffff;
}

.tabButtons {
    display: flex;
    justify-content: flex-start; /* 将菜单项对齐到左边 */
    cursor: pointer; /* 添加手形光标 */
    gap: 20px; /* 菜单项之间的间距 */
    align-items: center; /* 垂直居中对齐 */
    margin-bottom: 20px; /* 菜单项之间的间距 */
}

.tabButton {
    padding: 10px 15px 3px 0;
    position: relative; /* 使伪元素相对于菜单项定位 */
    margin-bottom: 10px;
}

.tabButton:hover {
    color: #b2a0d6; /* 悬停时的颜色变化 */
}

.tabButton.active::after {
    content: '';
    position: absolute;
    left: 50%; /* 水平居中 */
    bottom: -5px; /* 距离文本底部的位置 */
    width: 60%; /* 与菜单项宽度一致 */
    height: 2px; /* 下划线的高度 */
    background-color: #b2a0d6; /* 下划线颜色 */
    transform: translateX(-50%); /* 根据宽度进行水平居中 */
}

.inputRow {
    margin-bottom: 5px;
    display: flex;
    align-items: center;
}

.inputLabel {
    width:65px;
    margin-right: 10px;
    color: #777;
    font-size: 14px;
    flex-shrink: 0; /* 确保 label 不被压缩 */
}

.inputArea{
    display: flex;
    flex-grow: 1;
}

.inputField {
    flex-grow: 1; /* 让 input 扩展以填充剩余空间 */
    width: 60%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 16px;
    outline: none;
    font-size: 15px;
    transition: border-color 0.2s;
}

.inputField:focus {
    border-color: #ab78d5; /* 聚焦时边框颜色 */
}

.sendVerificationCodeButton{
    padding: 0;
    width: 80px;
    height: 43px;
    margin-left: 10px;
    font-size: 13px;
}

.sendVerificationCodeButton.disabled {
    background-color: #ccc; /* 禁用时的背景色 */
    color: #666; /* 禁用时的文本颜色 */
    cursor: not-allowed; /* 更改鼠标指针形状 */
    opacity: 0.65; /* 减少透明度 */
}

.errorRow {
    display: flex; /* 使用 flexbox 使错误信息在同一行显示 */
    align-items: center; /* 垂直居中对齐 */
    height: 20px; /* 固定高度 */
    margin-bottom: 7px; /* 调整错误信息与输入框之间的间距 */
    margin-left: 85px; /* 距离左边固定的距离（可以根据需要调整） */
}

.errorMessage {
    text-align: center; /* 错误信息居中 */
    color: red;
    font-size: 0.875em; /* 较小的字体运用 */
}

.serverErrorContainer {
    height: 20px; /* 固定高度 */
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    padding: 5px;
}

.serverErrorMessage {
    color: red; /* 错误信息的颜色 */
    text-align: center; /* 文字居中 */
}

.loginLink {
    text-align: center;
    margin-top: 20px;
    font-size: 15px;
}

.loginText {
    color: #5b4a7d;
    cursor: pointer;
}
.loginText:hover {
    color: #b2a0d6; /* 悬停时颜色变化 */
}